<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/blog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/blog/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/blog/atom.xml" title="编程那点事" type="application/atom+xml">






<meta name="description" content="Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960">
<meta property="og:type" content="article">
<meta property="og:title" content="手写Promise">
<meta property="og:url" content="https://lhweb.gitee.io/blog/2019/10/12/手写Promise/index.html">
<meta property="og:site_name" content="编程那点事">
<meta property="og:description" content="Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2019-10-12T12:30:24.614Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="手写Promise">
<meta name="twitter:description" content="Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/blog/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://lhweb.gitee.io/blog/2019/10/12/手写Promise/">





  <title>手写Promise | 编程那点事</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="default">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blog/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">编程那点事</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            Archives
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2019/10/12/手写Promise/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">手写Promise</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2019-10-12T19:58:11+08:00">
                2019-10-12
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br><span class="line">486</span><br><span class="line">487</span><br><span class="line">488</span><br><span class="line">489</span><br><span class="line">490</span><br><span class="line">491</span><br><span class="line">492</span><br><span class="line">493</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> STATUS = &#123;</span><br><span class="line"></span><br><span class="line">    PENDING: <span class="number">0</span>,</span><br><span class="line">  </span><br><span class="line">    FULFILLED: <span class="number">1</span>,</span><br><span class="line">  </span><br><span class="line">    REJECTED: <span class="number">2</span></span><br><span class="line">  </span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="built_in">Promise</span> &#123;</span><br><span class="line">   <span class="keyword">constructor</span>(<span class="params">task</span>)&#123;</span><br><span class="line">    <span class="comment">// promise初始状态</span></span><br><span class="line">    <span class="keyword">this</span>.status = STATUS.PENDING;</span><br><span class="line">    <span class="comment">// resolve时返回的数据</span></span><br><span class="line">    <span class="keyword">this</span>.resolveData  = <span class="literal">null</span>;</span><br><span class="line">    <span class="comment">// reject时返回的数据</span></span><br><span class="line">    <span class="keyword">this</span>.rejectData  = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// resolve和reject时执行的回调队列</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// promise的resolve和reject为异步响应时，即调用then时promise为</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// pending状态，则将传入then的函数加入该队列，等待promise resolve或</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// reject时执行该队列</span></span><br><span class="line">    <span class="keyword">this</span>.onFulfilledList = [];</span><br><span class="line">    <span class="keyword">this</span>.onRejectedList = [];</span><br><span class="line"></span><br><span class="line">     <span class="comment">/**</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    * promise成功，执行onFulfilledList回调</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    * @param &#123;*&#125; data </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.onResolve = <span class="function">(<span class="params">data</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(<span class="keyword">this</span>.status === STATUS.PENDING)&#123;</span><br><span class="line">            <span class="keyword">this</span>.status = STATUS.FULFILLED;</span><br><span class="line">            <span class="keyword">this</span>.resolveData = data;</span><br><span class="line">            <span class="keyword">this</span>.onFulfilledList.forEach(<span class="function"><span class="params">fn</span>=&gt;</span>&#123;</span><br><span class="line">                fn(<span class="keyword">this</span>.resolveData)</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">     <span class="comment">/**</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    * promise失败，执行onRejectedList回调</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    * @param &#123;*&#125; err </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.onReject = <span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span>(<span class="keyword">this</span>.status === STATUS.PENDING) &#123;</span><br><span class="line">            <span class="keyword">this</span>.status = STATUS.REJECTED;</span><br><span class="line">            <span class="keyword">this</span>.rejectData = err;</span><br><span class="line">            <span class="keyword">this</span>.onRejectedList.forEach(<span class="function"><span class="params">fn</span>=&gt;</span>&#123;</span><br><span class="line">                fn(<span class="keyword">this</span>.rejectData);</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    * promise解析, 根据then 返回数据类型不同封装不同的promise</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    * 返回，以便实现then的链式调用及Promise的thenable特性 </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    * @param &#123;*当前then return数据&#125; data </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    * @param &#123;*当前then的resolve&#125; resolve </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    * @param &#123;*当前then的reject&#125; reject </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.resolvPromise = <span class="function">(<span class="params">data,resolve,reject</span>) =&gt;</span>&#123;</span><br><span class="line">        <span class="comment">// then return 的数据是一个promise</span></span><br><span class="line">        <span class="keyword">if</span>(data <span class="keyword">instanceof</span> <span class="built_in">Promise</span>)&#123;</span><br><span class="line">            <span class="keyword">if</span>(data.status === STATUS.PENDING)&#123;</span><br><span class="line">                data.then(<span class="function">(<span class="params">val</span>)=&gt;</span>&#123;</span><br><span class="line">                    <span class="keyword">this</span>.resolvPromise(val,resolve,reject);</span><br><span class="line">                &#125;,reject)</span><br><span class="line">            &#125;<span class="keyword">else</span> <span class="keyword">if</span>(data.status === STATUS.FULFILLED)&#123;</span><br><span class="line">                resolve(data.resolveData)</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                reject(data.rejectData)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// then return的是一个对象,若对象具有then方法，则可使用此方法作为新的then</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">// Promise的thenable特性基于此</span></span><br><span class="line">        <span class="keyword">else</span> <span class="keyword">if</span>(data !== <span class="literal">null</span> &amp;&amp; data <span class="keyword">instanceof</span> <span class="built_in">Object</span>) &#123;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">try</span> &#123;</span><br><span class="line">                <span class="keyword">let</span> then = data.then</span><br><span class="line"></span><br><span class="line">                <span class="keyword">if</span>(then <span class="keyword">instanceof</span> <span class="built_in">Function</span>)&#123;</span><br><span class="line">                    then.call(data,<span class="function">(<span class="params">val</span>)=&gt;</span>&#123;</span><br><span class="line">                        <span class="keyword">this</span>.resolvPromise(val,resolve,reject);</span><br><span class="line">                    &#125;,reject)</span><br><span class="line">                &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                    resolve(data)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125; <span class="keyword">catch</span>(err)&#123;</span><br><span class="line">                reject(err)</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">        &#125; </span><br><span class="line">        <span class="comment">// then return 的是基本数据或undefined</span></span><br><span class="line">        <span class="keyword">else</span> &#123;</span><br><span class="line">            resolve(data)</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">  </span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">       <span class="comment">// 执行传入的任务task</span></span><br><span class="line"></span><br><span class="line">       <span class="keyword">try</span> &#123;</span><br><span class="line"></span><br><span class="line">        task(<span class="keyword">this</span>.onResolve.bind(<span class="keyword">this</span>), <span class="keyword">this</span>.onReject.bind(<span class="keyword">this</span>))</span><br><span class="line">  </span><br><span class="line">      &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">  </span><br><span class="line">        <span class="keyword">this</span>.onReject(err)</span><br><span class="line">  </span><br><span class="line">      &#125;</span><br><span class="line">    </span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   </span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * then回调，返回一个promise</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * 说明：传入then的参数不是函数的话，直接忽略，及在返回的新promise中直接resolve或reject目前</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * promise的数据，传入then的参数是函数的话，则直接已目前promise的数据为参数执行该函数，并</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * 根据函数返回值情况确定新promise的状态</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * @param &#123;*成功&#125; onFulfilled </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * @param &#123;*失败&#125; onRejected </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"></span><br><span class="line">  then(onFulfilled,onRejected)&#123;</span><br><span class="line">      <span class="keyword">let</span> promise;</span><br><span class="line">      <span class="comment">// pending状态下将传入then的函数加入promise对应的回调队列</span></span><br><span class="line"></span><br><span class="line">      <span class="comment">// 等待promise状态改变后执行</span></span><br><span class="line"></span><br><span class="line">      <span class="keyword">if</span>(<span class="keyword">this</span>.status === STATUS.PENDING)&#123;</span><br><span class="line">          promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=&gt;</span>&#123;</span><br><span class="line">              <span class="keyword">this</span>.onFulfilledList.push(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">                  <span class="comment">// 传入then的参数不是函数则忽略</span></span><br><span class="line">                 <span class="keyword">if</span>(!(onFulfilled <span class="keyword">instanceof</span> <span class="built_in">Function</span>)) &#123;</span><br><span class="line">                     resolve(<span class="keyword">this</span>.resolveData);</span><br><span class="line">                 &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                     <span class="keyword">let</span> data = onFulfilled(<span class="keyword">this</span>.resolveData);</span><br><span class="line"></span><br><span class="line">                     <span class="keyword">this</span>.resolvPromise(data,resolve,reject);</span><br><span class="line">                 &#125;</span><br><span class="line"></span><br><span class="line">              &#125;)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">this</span>.onRejectedList.push(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">            <span class="comment">// 传入then的参数不是函数则忽略</span></span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span>(!(onRejected <span class="keyword">instanceof</span> <span class="built_in">Function</span>))&#123;</span><br><span class="line">                reject(<span class="keyword">this</span>.resolveData)</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="keyword">let</span> data = onRejected(<span class="keyword">this</span>.resolveData)</span><br><span class="line"></span><br><span class="line">                <span class="keyword">this</span>.resolvPromise(data,resolve,reject)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">          &#125;)</span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// fulfilled状态下以promise的resolveData为参数执行传入then的</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 成功回调函数，再根据此函数的返回值封装新的promise返回</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">this</span>.status === STATUS.FULFILLED) &#123;</span><br><span class="line"></span><br><span class="line">        promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  </span><br><span class="line">          <span class="comment">// 传入then的参数不是函数则忽略，直接resolve</span></span><br><span class="line">  </span><br><span class="line">          <span class="keyword">if</span>(!(onFulfilled <span class="keyword">instanceof</span> <span class="built_in">Function</span>)) &#123;</span><br><span class="line">  </span><br><span class="line">            resolve(<span class="keyword">this</span>.resolveData)</span><br><span class="line">  </span><br><span class="line">          &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  </span><br><span class="line">            <span class="keyword">let</span> data = onFulfilled(<span class="keyword">this</span>.resolveData)</span><br><span class="line">  </span><br><span class="line">            <span class="keyword">this</span>.resolvePromise(data, resolve, reject)</span><br><span class="line">  </span><br><span class="line">          &#125;      </span><br><span class="line">  </span><br><span class="line">        &#125;)</span><br><span class="line">  </span><br><span class="line">      &#125;</span><br><span class="line">  </span><br><span class="line">      <span class="comment">// rejected状态类似fulfilled状态</span></span><br><span class="line"></span><br><span class="line">      <span class="keyword">else</span> &#123;</span><br><span class="line"></span><br><span class="line">        promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  </span><br><span class="line">          <span class="comment">// 传入then的参数不是函数则忽略，直接reject</span></span><br><span class="line">  </span><br><span class="line">          <span class="keyword">if</span>(!(onRejected <span class="keyword">instanceof</span> <span class="built_in">Function</span>)) &#123;</span><br><span class="line">  </span><br><span class="line">            reject(<span class="keyword">this</span>.rejectData)</span><br><span class="line">  </span><br><span class="line">          &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  </span><br><span class="line">            <span class="keyword">let</span> data = onRejected(<span class="keyword">this</span>.rejectData)</span><br><span class="line">  </span><br><span class="line">            <span class="keyword">this</span>.resolvePromise(data, resolve, reject)</span><br><span class="line">  </span><br><span class="line">          &#125;        </span><br><span class="line">  </span><br><span class="line">        &#125;)</span><br><span class="line">  </span><br><span class="line">      &#125;</span><br><span class="line">  </span><br><span class="line">      <span class="keyword">return</span> promise</span><br><span class="line">  </span><br><span class="line">    &#125;</span><br><span class="line">  </span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * catch方法</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * @param &#123;*reject函数&#125; rejectFn </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="keyword">catch</span>(rejectFn) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//不是函数直接返回</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>(!(rejectFn <span class="keyword">instanceof</span> <span class="built_in">Function</span>)) &#123;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span></span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">this</span>.status === STATUS.PENDING) &#123;  </span><br><span class="line"></span><br><span class="line">        <span class="keyword">this</span>.onRejectedList.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  </span><br><span class="line">          <span class="comment">// 没有错误信息则不执行catch中的函数</span></span><br><span class="line">  </span><br><span class="line">          <span class="keyword">if</span>(<span class="keyword">this</span>.rejectData !== <span class="literal">null</span>) &#123;</span><br><span class="line">  </span><br><span class="line">            rejectFn(<span class="keyword">this</span>.rejectData)</span><br><span class="line">  </span><br><span class="line">          &#125; </span><br><span class="line">  </span><br><span class="line">        &#125;)</span><br><span class="line">  </span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">this</span>.status = STATUS.REJECTED) &#123;</span><br><span class="line">  </span><br><span class="line">        <span class="comment">// 没有错误信息则不执行catch中的函数</span></span><br><span class="line">  </span><br><span class="line">        <span class="keyword">if</span>(<span class="keyword">this</span>.rejectData !== <span class="literal">null</span>) &#123;</span><br><span class="line">  </span><br><span class="line">          rejectFn(<span class="keyword">this</span>.rejectData)</span><br><span class="line">  </span><br><span class="line">        &#125;    </span><br><span class="line">  </span><br><span class="line">      &#125;      </span><br><span class="line">  </span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * resolve方法，</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * value为promise直接返回返回一个以value为resolveData的完成态promise</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * @param &#123;*&#125; value </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> resolve(value) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>(value <span class="keyword">instanceof</span> <span class="built_in">Promise</span>) &#123;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span> value</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;    </span><br><span class="line"></span><br><span class="line">      resolve(value)</span><br><span class="line"></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">   <span class="comment">/**</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * reject方法，类似resolve方法</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * @param &#123;*&#125; value </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">static</span> reject(value) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>(value <span class="keyword">instanceof</span> <span class="built_in">Promise</span>) &#123;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span> value</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;    </span><br><span class="line"></span><br><span class="line">      reject(value)</span><br><span class="line"></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * all方法，返回一个新的promise</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * 参数为promise数组</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * 成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * @param &#123;*&#125; promiseArray</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">static</span> all(promiseArray) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>(!(promiseArray <span class="keyword">instanceof</span> <span class="built_in">Array</span>)) &#123;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">TypeError</span>(<span class="string">"parameter must be array"</span>)</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> result = []</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> i = <span class="number">0</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">if</span>(promiseArray.length === <span class="number">0</span>) &#123;</span><br><span class="line"></span><br><span class="line">        resolve(result)</span><br><span class="line"></span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line"></span><br><span class="line">        promiseArray.forEach(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">          <span class="keyword">if</span>(item <span class="keyword">instanceof</span> <span class="built_in">Promise</span>) &#123;</span><br><span class="line"></span><br><span class="line">            item.then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">              result[index] = res</span><br><span class="line"></span><br><span class="line">              i++</span><br><span class="line"></span><br><span class="line">              <span class="keyword">if</span>(i === promiseArray.length) &#123;</span><br><span class="line"></span><br><span class="line">                resolve(result)</span><br><span class="line"></span><br><span class="line">              &#125;</span><br><span class="line"></span><br><span class="line">            &#125;, <span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">              reject(err)</span><br><span class="line"></span><br><span class="line">            &#125;)</span><br><span class="line"></span><br><span class="line">          &#125; </span><br><span class="line"></span><br><span class="line">          <span class="comment">// 如果传入的不是promise，则直接作为结果填入结果数组中</span></span><br><span class="line"></span><br><span class="line">          <span class="keyword">else</span> &#123;</span><br><span class="line"></span><br><span class="line">            result[index] = item</span><br><span class="line"></span><br><span class="line">            i++</span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span>(i === promiseArray.length) &#123;</span><br><span class="line"></span><br><span class="line">              resolve(result)</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">          &#125;</span><br><span class="line"></span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">    &#125;)  </span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">   <span class="comment">/**</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * race方法，返回一个新的promise</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * 参数为promise数组</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * 返回最先执行完的promise的结果，不论resolve还是reject</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * @param &#123;*&#125; promiseArray </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">static</span> race(promiseArray) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>(!(promiseArray <span class="keyword">instanceof</span> <span class="built_in">Array</span>)) &#123;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">TypeError</span>(<span class="string">"parameter must be array"</span>)</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 标识符，有一个promise执行完成设为true，返回结果</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> flag = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">      promiseArray.forEach(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span>(item <span class="keyword">instanceof</span> <span class="built_in">Promise</span>) &#123;</span><br><span class="line"></span><br><span class="line">          item.then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span>(!flag) &#123;</span><br><span class="line"></span><br><span class="line">              flag = <span class="literal">true</span></span><br><span class="line"></span><br><span class="line">              resolve(res)</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">          &#125;, <span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span>(!flag) &#123;</span><br><span class="line"></span><br><span class="line">              flag = <span class="literal">true</span></span><br><span class="line"></span><br><span class="line">              reject(err)</span><br><span class="line"></span><br><span class="line">            &#125;          </span><br><span class="line"></span><br><span class="line">          &#125;)</span><br><span class="line"></span><br><span class="line">        &#125; </span><br><span class="line"></span><br><span class="line">        <span class="comment">// 如果传入的不是promise，则直接作为结果</span></span><br><span class="line"></span><br><span class="line">        <span class="keyword">else</span> &#123;</span><br><span class="line"></span><br><span class="line">          <span class="keyword">if</span>(!flag) &#123;</span><br><span class="line"></span><br><span class="line">            flag = <span class="literal">true</span></span><br><span class="line"></span><br><span class="line">            resolve(item)</span><br><span class="line"></span><br><span class="line">          &#125;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">      &#125;)</span><br><span class="line"></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/blog/2019/10/10/Proxy代理语法/" rel="next" title="'Proxy代理语法'">
                <i class="fa fa-chevron-left"></i> 'Proxy代理语法'
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview-wrap sidebar-panel sidebar-panel-active">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">lhweb</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/blog/archives/">
              
                  <span class="site-state-item-count">39</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/blog/categories/index.html">
                  <span class="site-state-item-count">6</span>
                  <span class="site-state-item-name">categories</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/blog/tags/index.html">
                  <span class="site-state-item-count">25</span>
                  <span class="site-state-item-name">tags</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/blog/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">lhweb</span>

  
</div>


  <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">Theme &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/blog/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/blog/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/blog/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/blog/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/blog/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/blog/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
